var SelectMaterialForm = function () {
  var template = /*html*/ `
    <div class="select-material-form" v-loading.fullscreen.lock="loading">
      <div class="select-material-order-info clearfix">
        <div>物料名称：{{order.materialName}}</div>
        <div>规格型号：{{order.materialModel}}</div>
        <div>物料类型：{{order.materialType}}</div>
        <div>编号：{{order.color}}</div>
        <div>描述：{{order.colorDescription}}</div>
      </div>
      <search-btn-view append-to-body btn-text="查询物料" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <el-form class="select-material-search-form" :inline="true" label-width="auto">
            <el-form-item label="物料名称">
              <el-input class="search-input" v-model="search.materialName"></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input class="search-input" v-model="search.model"></el-input>
            </el-form-item>
            <el-form-item label="编号">
              <el-input class="search-input" v-model="search.color"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input class="search-input" v-model="search.colorDescription"></el-input>
            </el-form-item>
            <el-form-item label="供应商">
              <el-input class="search-input" v-model="search.providerName"></el-input>
            </el-form-item>
            <el-form-item label="供方编号">
              <el-input class="search-input" v-model="search.providerNo"></el-input>
            </el-form-item>
            <el-form-item label="物料部门">
              <el-select clearable filterable class="search-input" v-model="search.materialDeptId">
                <el-option v-for="dept in deptList" :key="dept.materialDeptId" :value="dept.materialDeptId" :label="dept.materialDeptName"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </search-btn-view>
      <div class="select-material-table-div">
        <el-table fit stripe border class="select-material-table" :data="pageDetailList" style="width:100%;" height="parent" 
          :highlight-current-row="true" ref="materialTable" @current-change="selectRow">
          <el-table-column prop="materialCode" label="物料代码" min-width="160px"></el-table-column>
          <el-table-column :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="materialType" label="物料类型" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="color" label="编号" :auto-width="true" min-width="60px"></el-table-column>
          <el-table-column :resizable="false" prop="providerName" label="供应商" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="providerNo" label="供方编号" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="model" label="规格" :auto-width="true" min-width="60px"></el-table-column>
          <el-table-column :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" prop="materialDeptName" label="物料部门" :auto-width="true" min-width="70px"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
      <div class="select-material-btns">
        <el-button size="small" type="primary" @click="edit">填写</el-button>
        <el-button size="small" type="primary" @click="save">保存</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      detailList: {
        type: Array,
        required: true
      },
      order: {
        type: Object,
        required: true
      }
    },
    data: function () {
      var detailList = this.detailList;
      var colorDescription = this.order.colorDescription;
      if (colorDescription !== '') {
        detailList = _.orderBy(detailList, [function (detail) {
          if (colorDescription === detail.colorDescription) {
            return 0;
          }
          return 1;
        }], ['asc']);
      }

      var search = {
        materialName: '',
        color: '',
        providerName: '',
        providerNo: '',
        model: '',
        colorDescription: '',
        materialDeptId:''
      };
      return {
        pageDetailList: [],
        tableDetailList: detailList,
        resDetailList: detailList,
        loading: false,
        selectMaterial: null,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        deptList:this.getDeptList(),
        pagination: {
          currentPage: 1,
          totalCount: detailList.length,
          pageSize: 50
        }
      };
    },

    created: function () {
      this.pageData();
    },

    methods: {
      getDeptList:function(){
        var detailList = this.detailList;
        var deptObj = {};
        for (var i = 0; i < detailList.length; i++) {
          var detail = detailList[i];
          var dept = detail.materialDept;
          if (dept !== '' && deptObj[dept.materialDeptId] === undefined) {
            deptObj[dept.materialDeptId] = dept;
          }
        }
        var deptList = _.values(deptObj);
        return deptList;
      },
      selectRow: function (row) {
        this.selectMaterial = row;
      },
      edit: function () {
        this.$emit('update-material');
      },
      save: function () {
        var selectMaterial = this.selectMaterial;
        if (selectMaterial === null) {
          this.$alert('请选择需要保存的物料', '信息');
          return;
        }

        var order = this.order;
        var oldFeed = order.getFeedMain();
        var postData = {
          oldOrderInfoDetail: JSON.stringify(oldFeed),
          materialCode: selectMaterial.materialCode,
          haveYltsTotal: order.haveYltsTotal
        };
        this.loading = true;
        var self = this;
        ajaxRequest('productionUnitFeed/updateOrderInfoDetailByMaterialOnBatch', postData).then(function () {
          self.loading = false;
          self.$alert('保存物料成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function () {
        var resDetailList = this.resDetailList;
        var search = this.search;
        resDetailList = _.filter(resDetailList, function (detail) {
          for (var field in search) {
            var queryValue = search[field];
            if (queryValue === '') {
              continue;
            }

            var value = detail[field];
            if (SysUtil.isEmpty(value)) {
              return false;
            }

            if (field === 'materialDeptId') {
              if (value !== queryValue) {
                return false;
              }
            } else {
              queryValue = queryValue.toLowerCase();
              value = value.toLowerCase();
              if (value.indexOf(queryValue) === -1) {
                return false;
              }
            }
          }
          return true;
        });
        this.oldSearch = _.cloneDeep(this.search);
        this.tableDetailList = resDetailList;

        this.pagination.totalCount = resDetailList.length;
        this.pagination.currentPage = 1;
        this.pageData();
      },
      pageChange: function () {
        this.search = _.cloneDeep(this.oldSearch);
        this.pageData();
      },
      pageData: function () {
        var tableDetailList = this.tableDetailList;
        var pagination = this.pagination;
        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;

        tableDetailList = tableDetailList.slice(start, start + pageSize);
        this.pageDetailList = tableDetailList;
      }
    },
    components: {
      SearchBtnView: SearchBtnView
    },
    template: template
  };
}();